<template>
  <div class="btn">
    <!-- 面包屑-->
    <div>
      <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>客户管理</el-breadcrumb-item>
        <el-breadcrumb-item>司机管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 添加的-->
    <div class="lineHeightBtn">
      <!--      <el-button type="primary" @click="dialogFormVisible = true"-->
      <!--        >添加</el-button-->
      <!--      >-->
      <!--      <input-->
      <!--        type="text"-->
      <!--        v-model="searchValue"-->
      <!--        id="chaxun_driver"-->
      <!--        placeholder="请输入申请人姓名或联系电话或车牌号查询"-->
      <!--      />-->
      <!--      <el-button type="primary" @click="search">查询</el-button>-->
      <el-card style="margin: 20px 0">
        <div class="lefted">
          <el-input
            type="text"
            v-model="searchValue"
            id="chaxun_driver"
            class="search_input"
            placeholder="请输入申请人姓名或联系电话或车牌号查询"
          />
          <el-button type="primary" @click="search">查询</el-button>
        </div>
        <el-button
          type="primary"
          @click="dialogFormVisible = true"
          style="float: right"
          class="righted"
          >添加</el-button
        >
      </el-card>

      <el-dialog
        id="tanChu_driver"
        title="添加申请"
        :visible.sync="dialogFormVisible"
      >
        <el-form :model="form">
          <el-form-item label="姓名">
            <el-input
              v-model="form.etcapply_name"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="联系电话">
            <el-input
              v-model="form.etcapply_phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="车牌号">
            <el-input
              v-model="form.etcapply_carNumber"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="地址">
            <el-input
              v-model="form.etcapply_address"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="是否成都户籍">
            <el-switch
              v-model="form.etcapply_jingji"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch>
          </el-form-item>
          <el-form-item label="所在区域">
            <el-select
              v-model="form.etcapply_bankName"
              placeholder="请选择银行名称"
            >
              <el-option label="中国银行" value="中国银行"></el-option>
              <el-option label="中国工商银行" value="中国工商银行"></el-option>
              <el-option label="中国农业银行" value="中国农业银行"></el-option>
              <el-option label="中国建设银行" value="中国建设银行"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="adddriver">添 加</el-button>
        </div>
      </el-dialog>
    </div>
    <!-- 列表-->
    <el-table
      :data="etcData"
      border
      style="width: 100%"
      :header-cell-style="headClass"
      :cell-style="rowClass"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column prop="etcApplyId" label="编号"> </el-table-column>
      <el-table-column prop="etcApplyName" label="姓名"> </el-table-column>
      <el-table-column prop="etcApplyPhone" label="联系电话"> </el-table-column>
      <el-table-column prop="etcApplyCarNumber" label="车牌号">
      </el-table-column>
      <el-table-column prop="etcapply_jingji" label="成都户籍">
      </el-table-column>
      <el-table-column prop="etcApplyAddress" label="地址"> </el-table-column>
      <el-table-column prop="etcApplyDate" label="申请时间"> </el-table-column>
      <el-table-column prop="etcApplyBankName" label="银行名称">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            class="colorBtn"
            type="danger"
            @click="del(scope.row.etcapply_id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="5"
      :current-page="currentPage"
      @current-change="changes"
      :total="length"
    >
      <!--:size-change="func4()"-->
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "driver", //用户管理部分
  data: function() {
    return {
      etcData: [],
      dialogFormVisible: false,
      dialogFormEditVisible: false,
      form: {
        //数据列表
        etcapply_id: "",
        etcapply_name: "", //用户名
        etcapply_phone: "", //电话
        etcapply_carNumber: "", //车牌号
        etcapply_jingji: "", //是否在职
        etcapply_address: "", //地址
        etcapply_bankName: "", //银行
        etcapply_date: "" //当前时间
      },
      length: 10,
      pageID: 1, //默认是第一页开始显示列表
      currentPage: 1, //默认是第一页开始
      pageSize: 5,
      searchValue: ""
    };
  },
  created: function() {
    this.getList();
  },
  methods: {
    adddriver: function() {
      this.getTimes();
      this.$axios
        .post(this.$api.thirdPart.etc.insert, {
          etcApplyName: this.form.etcapply_name, //
          etcApplyPhone: this.form.etcapply_phone, //
          etcApplyAddress: this.form.etcapply_address, //
          etcApplyJingJi: this.form.etcapply_jingji, //
          etcApplyBankName: this.form.etcapply_bankName, //
          etcApplyDate: this.form.etcapply_date, //
          etcApplyCarNumber: this.form.etcapply_carNumber
        })
        .then(res => {
          console.log("Etc_add_res = ", res);
          let result = res.data;
          //                    console.log('result = ',result);
          if (result.code === "200") {
            this.$message({
              message: result.msg,
              type: "success"
            });
            this.dialogFormVisible = false;
            if (result.msg === "添加成功") {
              this.getList();
            }
          } else {
            this.$message({
              message: result.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          console.log("adderr = ", err);
          this.$alert("请求出错");
        });
    },
    getList: function() {
      this.$axios
        .post(
          this.$api.thirdPart.etc.findAll,
          JSON.stringify({
            page: this.pageID,
            limit: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log(res);
          let result = res.data;
          this.length = result.data.total;
          if (result.code === "200") {
            this.etcData = result.data.list;
            console.log("etc_Get_Data = ", this.etcData);
            for (let i = 0; i < this.etcData.length; i++) {
              if (this.etcData[i].etcapply_jingji === true) {
                this.etcData[i].etcapply_jingji = "是";
              } else {
                this.etcData[i].etcapply_jingji = "否";
              }
            }
          } else {
            this.$alert(result.msg);
          }
        })
        .catch(err => {
          console.log("Etc_err = ", err);
          this.$alert("请求出错");
        });
    },
    changes: function(val) {
      this.pageID = val;
      this.getList();
    },
    del: function(Id) {
      //发送删除请求
      console.log("del_Id =  ", Id);
      this.$axios
        .post(
          this.$api.thirdPart.etc.delete,
          JSON.stringify({
            etcApplyId: Id
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          let result = res.data;
          console.log("etc_delete_resultv = ", result);
          //                    console.log('resultvc = ',result.values.code);
          if (result.code === "200") {
            this.$message({
              message: result.msg,
              type: "success"
            });
            if (result.msg === "删除成功") {
              this.getList();
            }
          } else {
            alert(result.msg);
          }
        })
        .catch(err => {
          console.log("del_err = ", err);
          this.$alert("请求出错");
        });
    },
    search: function() {
      this.$axios
        .post(
          this.$api.thirdPart.etc.findBy,
          JSON.stringify({
            etcApplyPhone: this.searchValue,
            etcApplyCarNumber: this.searchValue,
            etcApplyName: this.searchValue,
            page: this.pageID,
            limit: this.pageSize
          }),
          {
            headers: {
              "Content-Type": "application/json"
            }
          }
        )
        .then(res => {
          console.log("Etc_SearchList_res = ", res);
          let result = res.data;
          //拿到总的数据条数
          this.length = result.data.total;
          //                    console.log('this.length  =  ',this.length);
          //                    console.log('result = ',result.data);
          if (result.code === "200") {
            //                        let arr = [];
            //                        for(let i = 0;i<result.data.list.length;i++){
            //                            result.data.list[i].etcApplyId =
            //                        }
            this.etcData = result.data.list;
            this.$message({
              message: result.msg,
              type: "success"
            });
            console.log("etcData = ", this.etcData);
          } else {
            this.$message({
              message: result.msg,
              type: "warning"
            });
          }
        })
        .catch(err => {
          console.log("err = ", err);
          this.$alert("请求出错");
        });
    },
    getTimes: function time() {
      //获取当前的时间
      let time = new Date();
      let year = time.getFullYear();
      let mon = time.getMonth() + 1;
      let day = time.getDate();
      let hour = time.getHours();
      let min = time.getMinutes();
      let s = time.getSeconds();
      this.form.etcapply_date =
        year + "-" + mon + "-" + day + " " + hour + ":" + min + ":" + s;
    },
    rowClass() {
      //表格数据居中显示
      return "text-align:center";
    },
    headClass() {
      //表头居中显示
      return "text-align:center";
    }
  }
};
</script>

<!--<style>
.userPage .el-dialog {
  margin-top: 2vh !important;
}
</style>-->
<style scoped>
#chaxun_driver {
  height: 30px;
  line-height: 30px;
  margin: 0 35px;
  font-size: 20px;
}
#lineHeight2 {
  line-height: 50px !important;
}
.lineHeightBtn {
  text-align: left;
  line-height: 65px !important;
}
span {
  color: #ffffff !important;
}
#tanChu_driver {
  margin-top: 3vh;
}
.lefted {
  float: left;
  /*width: 391px;*/
}
/deep/ .el-card__body {
  padding: 0;
}
.righted {
  margin: 35px;
}
.search_input {
  width: 320px;
  margin: 20px 10px;
}
</style>
